<template>
    <div class="">
        <el-dialog
                :title="title"
                :visible.sync="dialogFormVisible"
                width="600px"
                :close-on-click-modal="false"
                @close="close"
        >
            <el-table :data="list" v-loading="listLoading" :element-loading-text="elementLoadingText" stripe
                      style="width: 100%">
                <el-table-column prop="type" label="用户信息">
                    <template slot-scope="scope">
                        <div class="flex flex-y-top">
                            <div class="">
                                <img class="goodlogo bor_rad50" :src="scope.row.portrait"/>
                            </div>
                            <div class="mar_l10">
                                <div>{{scope.row.userName}}</div>
                                <div>
                                    <el-tag size="mini" type="info" class="mar_l5">（ID:{{scope.row.bindId}}）
                                    </el-tag>
                                </div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="createdAt" label="加入时间"></el-table-column>
                <el-table-column prop="state" label="状态">
                    <template slot-scope="scope">
                        <div v-if="scope.row.state=='1'" class="color-green">已完成</div>
                        <div v-if="scope.row.state=='2'" class="color-red">未完成</div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="prev, pager, next" :total="page.total" :page-size="page.pagesize"
                           :current-page.sync="page.currentPage" @current-change="handleCurrentChange"></el-pagination>
            <div slot="footer" class="dialog-footer">
                <el-button size="medium" @click="close">取 消</el-button>
                <el-button size="medium" type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {invitationList} from "@/api/plug";

    export default {
        name: "unitSave",
        created() {
        },
        data() {
            return {
                list: [],
                listLoading: false,
                selectRows: '',
                elementLoadingText: '正在加载...',
                page: {
                    total: 0,
                    size: 10,
                    currentPage: 1
                },
                form:{},
                actId:'',
                title: "",
                dialogFormVisible: false,
            }
        },
        components: {},
        methods: {
            showEdit(row) {
                if (!row) {
                    this.title = "添加";
                } else {
                    this.title = "邀请列表";
                    this.form = Object.assign({}, row);
                }
                this.dialogFormVisible = true;
            },
            showEdit2(actId){
                this.actId = actId
                this.fetchData()
            },
            async fetchData() {
                this.listLoading = true;
                const {data, count} = await invitationList({
                    page: this.page.currentPage,
                    userId:this.form.id,
                    actId:this.actId});
                this.list = data;
                this.page.total = count;
                this.listLoading = false;
            },
            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.fetchData();
            },
            close() {
                this.dialogFormVisible = false;
            },
            save() {
                this.dialogFormVisible = false;
            },
        }
    };
</script>
